import {Modal, DatePicker, Button, Input} from 'antd'
import React, { useState, useRef, useEffect} from 'react'
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'
import { connect } from 'umi'
import { securityOperationType } from '@/utils/constant'
import { getMemberChange } from '../service'
import moment from 'moment';

const TableList = ({ current, visible, onCancel,type }) => {

  const actionRef = useRef();
  const [dataList, setDataList] = useState([]);
  const [securityId, setSecurityId] = useState(null);
  const [title, setTitle] = useState(null);
  const [searchDate, setSearchDate] = useState(new Date());
  const [loading, setLoading] = useState(false);

  useEffect(()=>{
    if (visible){
      if (current){
        setSecurityId(current.securityId);
        setTitle(`${current.cityName} - ${current.securityName} 人员变动列表`);
        setDataSource(undefined,current.securityId);
      }
    }
  },[visible]);

  const setDataSource = (date = new Date(),securityId)=>{
    setLoading(true);
    getMemberChange(new Date(date),securityId).then(res =>{
      setSearchDate(date);
      setDataList(res);
      setLoading(false);
    })
  };

  const columns = [
    {
      title: '序号',
      render:(text,record,index)=>`${index+1}`,
      hideInSearch: true,
    },
    {
      title: '工号',
      dataIndex: 'code',
      hideInSearch: true,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      hideInSearch: true,
    },
    {
      title: '身份证号码',
      dataIndex: 'idcard',
      hideInSearch: true,
    },
    {
      title: '入职日期',
      dataIndex: 'hiredate',
      hideInSearch: true,
      render: (text) => {
        return text!=='-' ? moment(text).format('YYYY-MM-DD') : '-'
      }
    },
    {
      title: '参加工作日期',
      dataIndex: 'beginworkdate',
      hideInSearch: true,
    },
    {
      title: '民族',
      dataIndex: 'nationName',
      hideInSearch: true,
    },
    {
      title: '家庭住址',
      dataIndex: 'address',
      hideInSearch: true,
    },
    {
      title: '移动电话',
      dataIndex: 'contact',
      hideInSearch: true,
    },
    {
      title: '操作类型',
      dataIndex: 'type',
      hideInSearch: true,
      valueEnum: {
        0: { text: securityOperationType[0].label},
        1: { text: securityOperationType[1].label},
        3: { text: securityOperationType[2].label},
        4: { text: securityOperationType[3].label},
      },
    },
    {
      title: '月份',
      dataIndex: 'date',
      hideInTable: true,
      renderFormItem: (item, props) => {
        return <DatePicker {...props} picker="month" style={{width:120}} defaultValue={moment(new Date())} />;
      },
    },
    {
      title: '月份',
      dataIndex: 'operationTime',
      hideInSearch: true,
      render: (text)=>{
        return text!=='-'?moment(text).format('YYYY-MM'):''
      },
    },
    type === 'social' && {
      title: '养老保险基数',
      dataIndex: 'endowmentInsurance',
      hideInSearch: true,
    },
    type === 'accumulation' && {
      title: '公积金基数',
      dataIndex: 'reservedFunds',
      hideInSearch: true,
    },
  ];

  const exportExcel = () => {
    let date = moment(searchDate).format('YYYY-MM');
    window.open(`/hr-ssc/api/api-admin/export/exportMemberChange?date=${date}&securityId=${current.securityId}`);
  };

  const renderFooter = () => {
    return (
      <>
        <Button onClick={onCancel}>取消</Button>
        <Button type="primary" onClick={() => exportExcel()}>导出</Button>
      </>
    )
  };

  return (
    <Modal
      title={title}
      visible={visible}
      onCancel={onCancel}
      width='85%'
      footer={renderFooter()}
    >
      <ProTable
        loading={loading}
        actionRef={actionRef}
        rowKey="code"
        dataSource={dataList}
        columns={columns}
        onSubmit={params => {
          setDataSource(params.date,securityId)}
        }
        toolBarRender={false}
        pagination={{ defaultPageSize: 1000, hideOnSinglePage: true }}
      />
    </Modal>
  )
};

export default connect(({  }) => ({
}))(TableList)
